<template>
	<view :style="objColor">
		<image class="header-image" src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderBg.png"
			style="width: 100%"></image>

		<view class="detCon">


			<view class="demarcation">
				<view class="detTopCon">
					<view class="detTopName">{{detail.stationName}}</view>
					<view class="detTopText">
						{{ detail.pileName ? detail.pileName : "--" }}{{ detail.gunName ? "-" + detail.gunName : "" }}
					</view>
				</view>
				<view class="orderInfoCon" style='padding-bottom: 150rpx;'>
					<!-- 订单信息 -->
					<view class="infoCon">
						<view class="demMoneyCon">
							<view class="placeholPileInfo">
								<view class="center flex-row-between">
									<view class="center-item flex-column-center">
										<view class="minute">{{detail.duration}}<text>分钟</text></view>
										<view class="desc">总占位时长</view>
									</view>
									<view class="center-item flex-column-center">
										<view class="minute">{{detail.actualDuration}}<text>分钟</text></view>
										<view class="desc">超时占位时长</view>
									</view>
									<view class="center-item flex-column-center">
										<view class="minute">{{detail.busBalance | regFenToYuan}}<text>元</text></view>
										<view class="desc">超时占位费用</view>
									</view>
								</view>
							</view>
							<view class="demMoneyList">
								<view class="demMoneyTitle">占位订单编号：</view>
								<view class="totalCon">
									<text class="order">{{detail.busId}}</text>
									<text class="copyButton" @click="copyOrder(detail.busId)">复制</text>
								</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">占位开始时间：</view>
								<view class="infoListVal">{{detail.actTimeS}}</view>
							</view>

							<view class="infoList">
								<view class="infoListTitle">占位结束时间：</view>
								<view class="infoListVal">{{detail.actTimeE}}</view>
							</view>

							<view class="infoList">
								<view class="infoListTitle">总占位时长：</view>
								<view class="infoListVal">{{detail.duration}}分钟</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">限时免费时长：</view>
								<view class="infoListVal">{{detail.freeDuration}}分钟</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">超时占位时长：</view>
								<view class="infoListVal">{{detail.actualDuration}}分钟</view>
							</view>
							<view class="infoList" v-if="detail.occupyCostModelDTO">
								<view class="infoListTitle">计费规则：</view>
								<view class="infoListVal" v-if="detail.occupyCostModelDTO.ruleType == 1">按时长阶梯计费</view>
								<view class="infoListVal" v-if="detail.occupyCostModelDTO.ruleType == 2">按时间段计费</view>
							</view>
							<view class="infoList" v-if="detail.occupyCostModelDTO">
								<view class="infoListTitle">计费详情：</view>
								<view class="infoListVal" v-if="detail.occupyCostModelDTO.ruleType == 1">
									<view>00:00 ~ 24:00，</view>

									<view v-if="detail.occupyCostModelDTO.occupyPhraseRules.every(item=>item.price == 0)">不收费；</view>
									<template v-else>
										<view v-for="(item,index) in detail.occupyCostModelDTO.occupyPhraseRules">
											<view v-if="index == 0">
												{{item.etime}}分钟以内，
												<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
												<text v-else>不收费；</text>
											</view>
											<view v-else-if="index == detail.occupyCostModelDTO.occupyPhraseRules.length-1">
												超出{{item.stime}}分钟部分，
												<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
												<text v-else>不收费；</text>
											</view>
											<view v-else>
												{{item.stime}}~{{item.etime}}分钟，
												<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
												<text v-else>不收费；</text>
											</view>

											<view v-if="index == detail.occupyCostModelDTO.occupyPhraseRules.length-1">
												（单次封顶{{detail.occupyCostModelDTO.limitAmount | regFenToYuan}}元）</view>
										</view>
									</template>
								</view>
								<view class="infoListVal1" v-else>
									<view v-for="(item,index) in detail.occupyCostModelDTO.occupyPhraseRules">
										<text>{{changeHourMinutestr(item.stime)}}~{{changeHourMinutestr(item.etime)}}，</text>
										<text v-if="item.price">{{item.price | regFenToYuan}}元/分钟；</text>
										<text v-else>不收费；</text>
										<view v-if="index == detail.occupyCostModelDTO.occupyPhraseRules.length-1">
											（单次封顶{{detail.occupyCostModelDTO.limitAmount | regFenToYuan}}元）</view>
									</view>
								</view>
							</view>

						</view>
					</view>

					<view class="infoCon">
						<view class="infoTop">
							<view class="gunName">费用说明</view>
							<view class="status" v-if="detail.billStatus == 11">待支付</view>
							<view class="status1" v-if="detail.billStatus == 14">已支付</view>
							<view class="status2" v-if="detail.billStatus == 18">已退款</view>
						</view>
						<view class="info-list">
							<view class="list-item flex-row-between">
								<view class="item-title">超时占位费用</view>
								<view class="item-desc">￥<text class="price">{{detail.busBalance | regFenToYuan}}</text></view>
							</view>
							<view class="list-item flex-row-between">
								<view class="item-title">付款时间</view>
								<view class="item-desc">{{detail.payTime || '-'}}</view>
							</view>


							<view class="list-item flex-row-between" v-if="detail.billStatus == 18">
								<view class="item-title">异常退款金额</view>
								<view class="item-desc" v-if="detail.refund">{{detail.refund | regFenToYuan}}</view>
							</view>
							<view class="list-item flex-row-between">
								<view class="item-title">实付金额</view>
								<view class="item-desc">{{detail.actualBalance | regFenToYuan}}</view>
								<!-- <view class="item-desc" v-else> - </view> -->
							</view>
						</view>
					</view>

					<view class="orderClothes flex-row-center" @tap="call">
						<image style='width: 25rpx;height:25rpx;margin-right:8rpx;'
							src='https://oos-cn.ctyunapi.cn/front-end/static/yiwen_icon.png'></image>
						<view style="color:#606266">费用有疑问</view>
					</view>

					<uni-popup ref="showCustomerPup" type="dialog">
						<uni-popup-dialog type="info" cancelText="取消" confirmText="呼叫" title="温馨提示" @confirm="callCustomer"
							@close="onCloseCustomer">
							<view>
								<view class="info">
									<view class="infoTitle">联系客服：</view><text class="infoValue">{{ serviceInfo.customerTelephone }}</text>
								</view>
								<view class="info">
									<view class="infoTitle">工作时间：</view>{{ serviceInfo.customerServiceTime }}
								</view>
							</view>
						</uni-popup-dialog>
					</uni-popup>

					<view class="btn-wrap flex-row-center" v-if="detail.billStatus == 11">
						<view class="btn flex-row-center" @click="payment">立即支付</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	"use strict";
	import {
		getBillDetailById,
		unifiedOrders,
		orderResultQuery
	} from '@/api/placeholder'

	import {
		getMemberInfo
	} from '@/api/https'

	//#ifdef H5
	import { toCDGJWechatMiniPay, toCDGJH5UrlPay } from '@/utils/h5.js';
	//#endif

	var app = getApp();
	var https_1 = require("./../../../api/https.js");

	var util_1 = require("./../../../utils/util.js");
	export default {
		components: {},
		data() {
			return {
				detail: {},
				serviceInfo: {
					customerTelephone: '',
					customerServiceTime: ''
				},
				memberInfo: {},
				stationId: 0,
				orderNo: '',
				isH5PayCallback: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.id = options.id
			this.stationId = options.stationId
			this.getBillDetailById()
			this.getRefundAmount()
			// this.getMemberInfo()

			// H5支付完成后回调处理-即充即退逻辑
			if (options.isH5PayCallback && this.isCdgj()) {
				this.isH5PayCallback = true
				this.orderNo = options.orderNo || ''
				console.log('----H5支付完成后回调处理-即充即退逻辑----');
				
				if (options.status === 'fail') {
					uni.showToast({
						title: '支付失败，请重新支付。',
						icon: 'none'
					})
				} else {
					 // 支付成功-查询充值状态
				}
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		onPageScroll: function(e) {

		},
		methods: {
			changeHourMinutestr(str) {
				let hours = Math.floor(str / 60).toString()
				let minutes = (str % 60).toString()
				if (str !== '0' && str !== '' && str !== null) {
					minutes = minutes.length < 2 ? '0' + minutes : minutes
					hours = hours.length < 2 ? '0' + hours : hours
					return hours + ':' + minutes
				} else {
					return ''
				}
			},
			//获取用户信息
			getMemberInfo: function() {
				getMemberInfo().then((res) => {
					if (res.code == 0) {
						this.memberInfo = res.data
					}
				});
			},
			getBillDetailById() {
				let id = this.id
				if (!id) return
				getBillDetailById(id).then(res => {
					// res.data.actualBalance = 0
					this.detail = res.data
				})
			},
			// 复制订单号
			copyOrder: function(data) {
				uni.setClipboardData({
					data
				});
			},
			getRefundAmount: function() {
				var that = this;
				https_1.refundAmount().then(function(res) {
					if (res.code == 0) {
						that.setData({
							serviceInfo: res.data
						});
					}
				});
			},
			//客服电话
			callCustomer: async function() {
				this.$refs.showCustomerPup.close()
				//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
							phoneNumber: this.serviceInfo.customerTelephone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: this.serviceInfo.customerTelephone
					});
				//#endif
			},
			call: function() {
				this.$refs.showCustomerPup.open()
			},

			onCloseCustomer: function() {
				this.$refs.showCustomerPup.close()
			},
			payment() {
				let that = this
				let detail = this.detail
				let accountBalance = this.memberInfo.accountBalance || 0
				console.log(accountBalance, detail.busBalance)
				console.log(uni.getProvider)
				// #ifdef MP-WEIXIN
				let tradeType = 'JSAPI'
				let openId = uni.getStorageSync('openId')
				// #endif

				// #ifdef APP-PLUS
				let tradeType = 'APP'
				let openId = uni.getStorageSync('openId')
				// #endif

				// #ifdef H5
				let tradeType = 'JSAPI'
				let openId = uni.getStorageSync('openId')
				if (that.isCdgj()) {
					// 成都公交
					if (uni.getStorageSync('clientType') == 'APP') {
						tradeType = 'MWEB' // 内嵌APP端
					}
				}
				// #endif

				unifiedOrders({
					totalFee: detail.busBalance,
					orderBalance: detail.busBalance,
					openId,
					tradeType,
					occupydBillId: detail.id
				}).then(res => {
					console.log(res, '这个支付信息')
					//#ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.sign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								that.getBillDetailById()
							}, 1000)

						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败，请重新支付。',
								icon: 'none'
							})
							console.log('fail:' + JSON.stringify(err));
						}
					});
					//#endif

					//#ifdef APP-PLUS
					var orderInfo = JSON.stringify({
						"appid": res.data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						"noncestr": res.data.noncestr, // 随机字符串
						"package": res.data.package, // 固定值
						"partnerid": res.data.partnerid, // 微信支付商户号
						"prepayid": res.data.prepayid, // 统一下单订单号
						"timestamp": res.data.timestamp, // 时间戳（单位：秒）
						"sign": res.data.sign // 签名，这里用的 MD5/RSA 签名
					})
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								that.getBillDetailById()
							}, 1000)

						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败，请重新支付。',
								icon: 'none'
							})
							console.log('fail:' + JSON.stringify(err));
						}
					});
					//#endif

					// #ifdef H5
					this.orderNo = res.data.orderNo
					if (this.isCdgj()) {
						const urlParams = util_1.getUrlDataToObj(window.location.href)
						const params = {
							...urlParams,
							orderNo: this.orderNo,
							isH5PayCallback: 1,
						}
						let callbackUrl = encodeURIComponent(`${app.globalData.imgUrl}/h5/${app.globalData.sellerNo}/#/orderSub/pages/placeholderOrderDetail/placeholderOrderDetail${util_1.setOptionsToUrlQuery(params)}`);
						
						const clientType = uni.getStorageSync('clientType')
						if (clientType == 'WeChat') {
							// H5 内嵌小程序端 
							toCDGJWechatMiniPay(res.data, callbackUrl)
						} else {
							// H5 内嵌APP端 
							toCDGJH5UrlPay(res.data, callbackUrl)
						}
					}
					// #endif

				})
			}

		}
	};
</script>
<style lang="less" scoped>
	@import "./placeholderOrderDetail.less";
	@import '../../../commin/flex.less';
	/* orderSub/pages/orderDetails/orderDetails.wxss */

	page {
		background-color: #f4f6f8;
		height: 100vh;
		padding-bottom: 40rpx;
	}

	.status {
		font-size: 28rpx;
		color: #FC724C;
	}

	.status1 {
		font-size: 28rpx;
		color: #6DB12E;
	}

	.status2 {
		font-size: 28rpx;
		color: #606266;
	}

	.placeholPileInfo {
		margin: 30rpx;
		overflow: hidden;
		line-height: 1;
		padding: 50rpx 0 38rpx;

		border-bottom: 1rpx dashed #C0C4CC;

		.head {
			margin-bottom: 36rpx;

			.title {
				font-size: 32rpx;
				color: #303133;
			}
		}

		.center-item {
			.minute {
				font-size: 40rpx;
				font-weight: 700;
				color: #303133;
				margin-bottom: 27rpx;

				text {
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			.desc {
				font-size: 28rpx;
				color: #606266;
			}
		}

		.p-btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 1rpx solid #6DB12E;
			font-size: 26rpx;
			color: #6DB12E;
		}
	}

	.header-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 556rpx;
	}

	.detCon {
		width: 100%;
		position: relative;
	}


	.demarcation {
		margin: 0 10rpx;

		.demCon {
			margin: 10rpx 14rpx;
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;

			.demTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.gunName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					height: 25rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: var(--textColor);
				}
			}

			.demCenter {
				position: relative;
				// height: 200rpx;
				text-align: center;

				.demNum {
					font-size: 64rpx;
					font-weight: bold;
					margin: 55rpx 0 16rpx 0;
				}

				.demTitle {
					color: #606266;
					font-size: 26rpx;
				}

				.symbol {
					font-size: 40rpx;
					color: #000000;
				}

				.demState {
					color: #606266;
					font-size: 28rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;

					image {
						height: 31rpx;
						width: 31rpx;
						vertical-align: text-bottom;
						margin-left: 10rpx;
					}
				}

			}
		}

		.infoCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 16rpx 14rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.infoTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 39rpx 32rpx 32rpx 34rpx;
				border-bottom: 1rpx solid #DCDFE6;

				.gunName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					font-size: 28rpx;
					color: #FC724C;
					line-height: 28rpx;
				}
			}

			.info-list {
				padding: 40rpx 32rpx;
				line-height: 1;

				.list-item {
					margin-bottom: 25rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}

				.item-title {
					font-size: 24rpx;
					color: #909399;
				}

				.item-desc {
					font-size: 24rpx;
					color: #303133;

					.price {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}

			// <view class="info-list">
			// 	<view class="list-item">
			// 		<view class="item-title"></view>
			// 		<view class="item-desc"></view>
			// 	</view>
			// </view>

			.infoList {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 34rpx;

				.infoListTitle {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}

				.infoListVal {
					word-break: break-all;
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					text-align: right;
					line-height: 40rpx;
				}

				.infoListVal1 {
					word-break: break-all;
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
					text-align: right;
					line-height: 40rpx;
					flex: 1;
				}
			}
		}

		.btn-wrap {
			width: 750rpx;
			height: 120rpx;
			background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
			box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
			border: 2rpx solid rgba(255, 255, 255, 0.549);
			position: fixed;
			bottom: 0;
			left: 0;

			.btn {
				width: 680rpx;
				height: 88rpx;
				background: #6DB12E;
				border-radius: 44rpx;
				opacity: 1;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.costCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 10rpx 10rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.van-steps {
				background: none;
			}

			.costTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.costName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}
			}

			.costDet {
				color: #606266;
				font-size: 26rpx;
				margin: 20rpx 20rpx;
			}
		}

		.demMoneyCon {

			// > view {
			//   border: none !important;
			//   box-shadow: none;
			// }
			>text {
				border: none !important;
				box-shadow: none;
			}

			padding: 10rpx 0 10rpx 0;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.demMoneyMore {
				background: #f5f7fa;
				padding: 40rpx 24rpx 10rpx 24rpx;
				margin: 0 32rpx 32rpx 32rpx;

				.MoneyMoreList {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;
					margin-bottom: 32rpx;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.MoneyMoreList2 {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.totalDetailed {
					text-align: right;
					margin: 9rpx 0 29rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
					line-height: 34rpx;
					opacity: 0.9;
				}
			}
		}

		.van-cell:after {
			display: none !important;
		}

		.van-collapse-item__content {
			padding-top: 0px;
		}
	}






	.money {
		color: #606266;
		font-size: 26rpx;
		text-align: right;
		font-weight: 500;
	}

	.tc {
		font-size: 34rpx;
		font-weight: bold;
	}



	.detTopCon {
		margin: 0rpx 32rpx;
		color: #FFFFFF;
		font-weight: 400;
		font-weight: 400;
	}

	.detTopName {
		font-size: 36rpx;
		padding-top: 64rpx;

	}

	.detTopText {
		font-size: 24rpx;
		margin: 24rpx 0 41rpx 0;
	}

	.orderClothes {
		font-weight: 400;
		color: #606266;
		font-size: 24rpx;
		text-align: center;
		margin: 40rpx 0;

		.orderClothesText {
			color: var(--textColor);
		}
	}
</style>